<template>
  <view class="index-container">
    <!-- 搜索框 -->
    <view class="search">
      <input placeholder="搜索职位" class="inp" @click="gotoSearch" />
      <img src="../../static/img/组件 214 – 1.png" alt="" class="inp-img"/>
    </view>
    <!-- 轮播图 -->
    <view class="swiper-container wrap">
      <swiper class="swiper">
        <swiper-item v-for="(item,index) in swiperList" >
          <img :src="item.imgUrl" class="swiper-img"/>
        </swiper-item>
      </swiper>
    </view>
    <!-- 导航项 -->
    <Navigator @nav="gotoSearch()"></Navigator>
    <!-- 展示项 -->
    <InfoItem v-for="(item,index) in InfoList" :key="index" :infoItem="item"></InfoItem>
  </view>
</template>

<script>
import Navigator from '../../components/index/Navigator.vue'
import InfoItem from '../../components/index/InfoItem.vue'
export default {
  components: {Navigator,InfoItem },
  data() {
    return {
      flag: true,
      swiperList: [],
      InfoList:[]
    };
  },
  methods: {
    gotoSearch() {
      console.log("sda");
      uni.switchTab({
        // 跳转要做完整的路劲加上斜杠
        url: "/pages/work/work",
      });
    },
  },
  onLoad() {
    // 获取轮播图数据
    uni.request({
      url:'http://139.159.145.212:19001/power/wx/banner/listPage',
      data:{ position: 30, type: 0 },
      success:res=> {
        this.swiperList = res.data.data
      },
    })
    // 获取首页的展示数据
    uni.request({
      url:'http://139.159.145.212:19001/power/wx/recruit/condition/listPage',
      success: res => {
        this.InfoList = res.data.rows
        console.log(this.InfoList);
      }
    })
  },
  onShow() {},
  mounted() {},
};
</script>

<style scoped>
.index-container {
  width: 100%;
  background-color: lightskyblue;
}
.search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
}
.inp {
  background-image: url("../../static/img/组件 208 – 1.png") no-repeat;
  background-position: 20 0;
  flex: 1;
  background-color: #fff;
  border-radius: 20rpx;
  padding-left: 20rpx;
  margin-right: 20rpx;
}
.inp-img {
  width: 30rpx;
  height: 30rpx;
}
/* 轮播图样式 */
@import url("../../style/common.css");
.swiper-container {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
}
.swiper {
  width: 100%;
  height: 400rpx;
}
.swiper-img {
  width: 100%;
  height: 400rpx;
}
</style>
